<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;list-style:none}
    html{font-size=20px;font-weight:700}
    #wrap{
      width:25rem;height:8rem;overflow:hidden;
    }
    #ul1{
      width:300rem;height:8rem;overflow:hidden;transform:translateX(0);
    }
    #ul1 li{
      width:25rem;height:8rem;line-height:8rem;float:left;text-align:center;
    }
  </style>
  <script>
    window.onload=function(){
      document.documentElement.style.fontSize=document.documentElement.clientWidth*20/500+'px';

      let oul = document.getElementById('ul1');
      let wrap = document.getElementById('wrap');

      oul.insertBefore(oul.children[oul.children.length-1].cloneNode(true),oul.children[0]);
      oul.appendChild(oul.children[1].cloneNode(true));


      let left=-oul.children[0].offsetWidth;
      oul.style.transform=`translateX(${left}px)`;

      oul.addEventListener('touchstart',ev=>{
        <!-- clearInterval(iii); -->
        let startx=ev.targetTouches[0].clientX;
        let dir = startx-left;//相对于整个ul的x位移的距离,因为left是个负值所以这里是正整数；
        oul.style.transition='';
        <!-- wrap.style.transition=''; -->
        function fmove(ev){
          let x=ev.targetTouches[0].clientX;
          left = x-dir;//这里减去正整数，就是负值。
          <!-- console.log(left) -->
          oul.style.transform=`translateX(${left}px)`;
        };
        function fend(ev){
          let n= Math.round(-left/oul.children[0].offsetWidth);
          <!-- console.log(n) -->
          if(n==0){
            n=oul.children.length-2;
            oul.style.transform=`translateX(${left-n*oul.children[0].offsetWidth}px)`;
          }else if(n==6){
            n=1;
            oul.style.transform=`translateX(${left+(oul.children.length-2)*oul.children[0].offsetWidth}px)`;
          }
          left= -n*oul.children[0].offsetWidth;
          oul.style.transform=`translateX(${left}px)`;
          oul.style.transition='0.3s all ease';
          oul.removeEventListener('touchmove',fmove,{passive: false});
          oul.removeEventListener('touchend',fend,{passive: false});
        };
        oul.addEventListener('touchmove',fmove,{passive: false});
        oul.addEventListener('touchend',fend,{passive: false});
      },{passive: false});
      setInterval(function (ev){
        oul.style.transition='';
        let n= Math.round(-left/oul.children[0].offsetWidth);
        n++;
        if(n==0){
          n=oul.children.length-2;
          oul.style.transform=`translateX(${left-n*oul.children[0].offsetWidth}px)`;
        }else if(n==6){
          n=1;
          oul.style.transform=`translateX(${left+(oul.children.length-2)*oul.children[0].offsetWidth}px)`;
        }
        left= -n*oul.children[0].offsetWidth;
        oul.style.transform=`translateX(${left}px)`;
        oul.style.transition='0.3s all ease';
      },2000)
    }
  </script>
</head>
<body>
  <div id="wrap">
    <ul id="ul1">
      <li style="background:red">1</li>
      <li style="background:blue">2</li>
      <li style="background:green">3</li>
      <li style="background:yellow">4</li>
      <li style="background:pink">5</li>
    </ul>
  </div>
</body>
</html>
